<!--邀请分享 首页-->
<template>
  <div class="bg">
    <div class="content" @click="dismissClick">
      <div class="share" @click="imageClick">
        
        <LImage class="share-image main1" v-if="type == 1" v-bind:key="1" :src="Config.img(isEnd ? 'shareInvite1_en.jpg' : 'shareInvite1.png')"></LImage>
        <LImage class="share-image main1" v-else-if="type == 2" v-bind:key="2" :src="Config.img(isEnd ? 'shareInvite2_en.jpg' : 'shareInvite2.png')"></LImage>
        <LImage class="share-image main1" v-else v-bind:key="3" :src="Config.img(isEnd ? 'shareInvite3_en.jpg' : 'shareInvite3.png')"></LImage>

        <div class="share-button">
          <div class="column">                                     
            <text class="font18 lan share-text" v-if="inviteScale">{{T('立即注册您将获得，${1}%交易奖励！').replace("${1}", inviteScale)}}</text>
            <text class="font18 lan share-text" v-else>{{T('数字资产AI量化服务平台')}}</text>
            <div class="height19"></div>
            <text class="font18 lan">{{T('邀请码')+'：'+inviteCode}}</text>
          </div>
          <div class="all"></div>
          <WeexQRCode v-if="inviteCode" class="share-code" :code="(Config.inviteUrl+inviteCode)" style="width:80px;height:80px;"></WeexQRCode>
        </div>
      </div>
    </div>

    <!--底部-->
    <div class="bottom bg2">

      <div class="menu">
        <div :class="['menu-size', (type == 1 ? 'main-b1' : 'bk3')]" @click="menuClick(1)">
          <LImage class="menu-image" :src="Config.img(type == 1 ? 'xuanzhong.png' : 'weixuanzhong.png')"></LImage>
          <text :class="['font20', (type == 1 ? 'text1' : 'text2')]">{{T('事半功倍')}}</text>
        </div>

        <div :class="['menu-size', (type == 2 ? 'main-b1' : 'bk3')]" @click="menuClick(2)">
          <LImage class="menu-image" :src="Config.img(type == 2 ? 'xuanzhong.png' : 'weixuanzhong.png')"></LImage>
          <text :class="['font20', (type == 2 ? 'text1' : 'text2')]">{{T('以简驭繁')}}</text>
        </div>

        <div :class="['menu-size', (type == 3 ? 'main-b1' : 'bk3')]" @click="menuClick(3)">
          <LImage class="menu-image" :src="Config.img(type == 3 ? 'xuanzhong.png' : 'weixuanzhong.png')"></LImage>
          <text :class="['font20', (type == 3 ? 'text1' : 'text2')]">{{T('一键躺赢')}}</text>
        </div>
      </div>
      
      <div class="but main1" @click="shareClick">
        <text class="font32 text1">{{T('分享')}}</text>
      </div>
    </div>
  </div>
</template>

<script>

//功能
import navigator from "@/_js/navigator";
import math from "@/_js/math";
import Config from "@/_js/config";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {


  data() {
    
    return {
      T:T,
      math:math,
      Config:Config,
      isEnd:false, //true 英文
      
      type:1,//类型
      inviteScale:undefined, //邀请比例
      inviteCode:undefined, //邀请码
    };
  },

  mounted() {
    this.isEnd = weex.config.language == 'en';
    this.inviteScale = navigator.getParam("inviteScale");
    this.inviteCode = navigator.getParam("inviteCode");
  },

  methods: {

    /********************************** 点击触发*/
    //隐藏
    dismissClick(){
      navigator.dismiss();
    },

    //图片点击
    imageClick(){
    },

    //菜单单点击
    menuClick(type){
      this.type = type;
    },

    //分享
    shareClick(){
      navigator.dismiss();

      var copyUrl = Config.inviteUrl + this.inviteCode;
      var param = {'type':this.type,
                   'inviteCode':this.inviteCode,
                   'copyUrl':copyUrl};
      this.inviteScale&&(param['inviteScale'] = this.inviteScale);
      weexFunction.shareInvite('share/ShareInvite', param);
    },
  }
}

</script>


<style src="@/_css/style.css"></style>
<style scoped>
.bg {
  position: absolute;
  width: 750px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background-color: rgba(32, 43, 70, 0.7);
}
.content{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 750px;
  flex: 1;
}

/******* 分享页面*/
.share{
  width: 460px;
  height: 818px;
}
.share-image {
  position: absolute;
  width: 460px;
  height: 818px;
}
.share-button{
  position: absolute;
  flex-direction: row;
  align-items: center;
  width: 460px;
  height: 111px;

  background-color: #F1F4FF;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;

  padding-left: 34px;
  padding-right: 38px;
  
  bottom: 0;
  left: 0;
}
.share-text{
  width: 295px;
}
.share-code{
  width: 75px;
  height: 75px;
}
.lan{
  color: #0084FF;
}

/******* 菜单*/
.bottom{
  flex-direction: column;
  align-items: center;
  width: 750px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.menu{
  flex-direction: row;
  justify-content: space-between;
  width: 750px;
  height: 213px;

  padding-left: 50px;
  padding-right: 50px;
}
.menu-size{
  flex-direction: column;
  align-items: center;
  width: 173px;
  height: 173px;
  border-radius: 5px;
  border-width: 1px;

  margin-top: 33px;
}
.menu-image{
  width: 48px;
  height: 48px;
  margin-top: 40px;
  margin-bottom: 24px;
}
.but{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 653px;
  height: 80px;
  border-radius: 3px;

  margin-top: 30px;
  margin-bottom: 30px;
}

/******* 高度*/
.height19{
  height: 19px;
}
</style>